<template>
  <div class="wh100 shiftBgcolor">
    <el-menu
      :default-active="actRoute"
      unique-opened
      :collapse-transition="false"
      text-color="#ffffff"
      :background-color="menuBackColor"
      active-text-color="#67c23a"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      router
    >
      <el-menu-item index="/" class="sys-top">
        <i class="sys-icon">
          <img src="../../assets/sys-icon2.png" width="40px" />
        </i>
        <span slot="title" class="sys-title">华圆企业管理系统</span>
      </el-menu-item>
      <div v-for="(item, index) in menuData" :key="index">
        <div v-if="item.children.length == 0" v-auth="item.auth">
          <el-menu-item :index="item.url">
            <i :class="item.iconfont + ' iconfont'"></i>
            <span slot="title">{{ item.menuName }}</span>
          </el-menu-item>
        </div>
        <div v-if="item.children.length > 0" v-auth="item.auth">
          <el-submenu :index="index + ''" class="submenu-wrap">
            <template slot="title">
              <i :class="item.iconfont + ' iconfont'"></i>
              <span slot="title">{{ item.menuName }}</span>
            </template>
            <div v-for="(secondItem, index) in item.children" :key="index">
              <div v-if="!secondItem.children" v-auth="secondItem.auth">
                <el-menu-item :index="secondItem.url"
                  >{{ secondItem.menuName }}
                </el-menu-item>
              </div>

              <div v-else class="thirdMenu">
                <el-submenu :index="secondItem.menuName + ''">
                  <template slot="title">
                    <div slot="title" :class="isCollapseStyle">
                      {{ secondItem.menuName }}
                    </div>
                  </template>
                  <el-menu-item
                    v-for="(thirdItem, index) in secondItem.children"
                    :index="thirdItem.url"
                    :key="index"
                    >{{ thirdItem.menuName }}
                  </el-menu-item>
                </el-submenu>
              </div>
            </div>
          </el-submenu>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "SideMenu",
  data() {
    return {
      actRoute: "",
      isCollapseStyle: "thirdMenu-title",
      menuData:[
        {
          menuName: "项目概况",
          menuSort: 1,
          iconfont: "el-icon-office-building",
          url: "/project",
          auth:"project",
          children: []
        },
        {
          menuName: "材料总表",
          menuSort: 1,
          iconfont: "el-icon-goods",
          url: "/goodsManage",
          auth:"goodsManage",
          children: []
        },
        {
          menuName: "材料入库",
          menuSort: 2,
          iconfont: "el-icon-s-shop",
          url: "/goodsEnter",
          auth:"goodsEnter",
          children: []
        },
        {
          menuName: "采购管理",
          menuSort: 3,
          iconfont: "el-icon-s-claim",
          auth:"purchase",
          children: [
            {
              menuName: "提交申请",
              url: "/applyPage",
              auth:"applyPage",
            },
            {
              menuName: "申请记录",
              url: "/applyList",
              auth:"applyList",
            }
          ]
        },
        {
          menuName: "申请审核",
          menuSort: 4,
          iconfont: "el-icon-s-check",
          url: "/applyCheck",
          auth:"applyCheck",
          children: []
        },
        {
          menuName: "3D视图",
          menuSort: 4,
          iconfont: "el-icon-s-check",
          url: "/threeBox",
          auth:"threeBox",
          children: []
        },
        {
          menuName: "采购核对",
          menuSort: 5,
          iconfont: "el-icon-s-order",
          auth:"purchaseCheck",
          children: [
            {
              menuName: "录入合同",
              url: "/inputAgree",
              auth:"inputAgree",
            },
            {
              menuName: "合同列表",
              url: "/agreement",
              auth:"agreement",
            },
            {
              menuName: "收货录入",
              url: "/sendRecord",
              auth:"sendRecord",
            }
          ]
        },
        {
          menuName: "结算管理",
          menuSort: 6,
          iconfont: "el-icon-s-finance",
          auth:"settlemanage",
          children: [
            {
              menuName: "结算申请",
              url: "",
              auth:"settleapply",
            }
          ]
        },
        {
          menuName: "新闻公告",
          menuSort: 7,
          iconfont: "el-icon-s-comment",
          auth:"newTips",
          children: [
            {
              menuName: "信息列表",
              url: "/newsList",
              auth:"newsList",
            },
            {
              menuName: "新闻编辑",
              url: "/newsEdit",
              auth:"newsEdit",
            }
            
          ]
        },
        {
          menuName: "权限管理",
          menuSort: 8,
          iconfont: "el-icon-setting",
          url: "/authManage",
          auth:"authManage",
          children: []
        },
      ]
    };
  },
  computed: {
    ...mapState({
      isCollapse: state => state.layouts.isCollapse,
      menuBackColor: state => state.layouts.menuBackColor
    }),
   
  },
  watch: {
    $route: {
      handler(to) {
        this.actRoute = to.fullPath;
      },
      deep: true,
      immediate: true
    },
    isCollapse: {
      handler(nval) {
        if (nval == true) {
          this.isCollapseStyle = "";
        } else {
          this.isCollapseStyle = "thirdMenu-title";
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {}
};
</script>
<style lang="less" scoped>
.el-menu {
  border-right-width: 0;
  overflow: hidden;
  .iconfont {
    color: rgb(231, 240, 247);
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    margin-right: 24px;
  }
}
.el-submenu {
  text-align: left !important;
  font-size: 30px;
  .thirdMenu .thirdMenu-title {
    text-align: center !important;
  }
}
.el-menu-item,
.el-submenu__title {
  height: 56px;
  line-height: 56px;
  position: relative;
  white-space: nowrap;
  list-style: none;
  text-align: left !important;
}
</style>
